import {computed, designPage, onBeforeUnmount, useClassCache} from '@peryl/react-compose';
import {Application, Form, i18n, PageThemeUtils} from 'plain-design';
import './static/icon/installPlainRocketIcon';
import './app.scss';
import './component.scss';
import {deepcopy} from '@peryl/utils/deepcopy';
import {microApp} from "./microApp";
import {EnUsLocale} from "../node_modules/plain-design/src/packages/i18n/lang/en-us";

import './common/mockjs.request';
import {installRemixIcon} from "./modules/remix-icon/installRemixIcon";
import {installPlainDesign} from "./modules/plain-design";

installRemixIcon();
installPlainDesign();
i18n.state.localeOptions.push({ label: 'English', key: 'en-us', lang: EnUsLocale, });
i18n.setLangs({ 'en-us': EnUsLocale });
i18n.applyCache();

export const App = designPage(() => {

  const classes = useClassCache(() => [
    'app-container',
    `app-container-${PageThemeUtils.state.dark ? 'dark' : 'light'}`,
    `app-container-size-${PageThemeUtils.state.size || 'normal'}`
  ]);

  const configuration = computed(() => {
    // PageThemeUtils.state.primaryKey = PageThemeUtils.state.dark ? 'light' : 'dark';
    const val = deepcopy(PageThemeUtils.configuration.value);
    // val.theme!.base!.primary = "#5e49ff"
    /*val.default!.size = 'mini';
    val.default!.shape = 'none';
    val.default!.inputMode = 'stroke';*/
    val.theme!.vars!["line-height"] = '1.4';
    return val;
  });

  /**
   * 切换多语言的时候，设置表单默认的文本方向
   * @author  韦胜健
   * @date    2024.6.18 16:12
   */
  const resetDefaultVerticalLabel = () => Form.use.options.props.verticalLabel.default = i18n.state.currentLang === 'en-us';
  resetDefaultVerticalLabel();
  onBeforeUnmount(i18n.hooks.onChangeLang.use(() => {resetDefaultVerticalLabel();}));

  return () => (
    <Application configuration={configuration.value}>
      <div
        className={classes.value}
        key={
          (PageThemeUtils.state.size || '_size') +
          (PageThemeUtils.state.primaryKey || '_primary') +
          i18n.getCurrentLanguage() +
          `${PageThemeUtils.state.dark ? 1 : 2}`
        }>
        {microApp.route.render()}
      </div>
    </Application>
  );
});
